<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		
		init();
		createIBSheet2(document.getElementById("pivotArea"),"myPivot","100%","400px");
		
		//sheet 초기화
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var initData = {};
		initData.Cfg = {SearchMode:smLazyLoad, Page:50, MergeSheet:msHeaderOnly};
		initData.Cols = [
			{Header:"행/열 필드|부서명",Type:"Text", SaveName:"sDept", Width:80, Align:"Center",Edit:0},
			{Header:"행/열 필드|팀명",Type:"Text", SaveName:"sTeam", Width:80, Align:"Center",Edit:0},
			{Header:"행/열 필드|직급",Type:"Text", SaveName:"sPos", Width:80, Align:"Center",Edit:0},
			{Header:"행/열 필드|성명",Type:"Text", SaveName:"sName", Width:80, Align:"Center"},
			{Header:"행/열 필드|성별",Type:"Combo", SaveName:"sSex", Width:80, Align:"Center",ComboText:"男|女",ComboCode:"남|여"},
			{Header:"행/열 필드|연령대",Type:"Text", SaveName:"sAge2", Width:80, Align:"Center"},
			{Header:"행/열 필드|거주지1",Type:"Text", SaveName:"sAddr1", Width:80, Align:"Center"},
			{Header:"값 필드|나이",Type:"Int", SaveName:"sAge", Width:80, Align:"Right"},
			{Header:"값 필드|근속기간",Type:"Int", SaveName:"sYearOfService", Width:80, Align:"Right"},
			{Header:"값 필드|급여",Type:"Int", SaveName:"sSalary", Width:80, Align:"Right",Format:"#,### 원"},
			{Header:"값 필드|상여",Type:"Int", SaveName:"sBonus", Width:80, Align:"Right",Format:"#,### 원"}
		];
		initData.HeaderMode  = {ColMove:1};
		IBS_InitSheet(mySheet,initData);
		
		mySheet.SetDataAutoTrim(0);

		mySheet.FitColWidth();
		
		mySheet.SetRangeBackColor(0,0,0,6,"#3F73A5");
		mySheet.SetRangeFontColor(0,0,0,6,"#FFFFFF");
		mySheet.SetRangeBackColor(0,7,0,10,"#1F5385");
		mySheet.SetRangeFontColor(0,7,0,10,"#FFFFFF");
		
		doAction("search");
	});
	
	function init() {
		$('#pivotArea').hide();
		$('#viewArea').show();
	}
	
	function createCrossTable() {
		var rows		= $('#rows').val();
		var cols		= $('#cols').val();
		var value		= $('#value').val();
		var valueType	= $("#valueType option:selected").val();
		
		$('#viewArea').hide();
		$('#pivotArea').show();
		
		var info = {Rows:cols, Cols:rows, Value:value, ValueType:valueType};
		myPivot.Reset();
		myPivot.CreatePivotTable(info, mySheet);
		
		myPivot.FitColWidth();
	}
	
	function createPivotTable() {
		var rows		= $('#rows').val();
		var cols		= $('#cols').val();
		var value		= $('#value').val();
		var valueType	= $("#valueType option:selected").val();
		
		$('#viewArea').hide();
		$('#pivotArea').show();
		
		var info = {Rows:rows, Cols:cols, Value:value, ValueType:valueType};
		myPivot.Reset();
		myPivot.CreatePivotTable(info, mySheet);
		
		myPivot.FitColWidth();
	}
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/pivot_data.xml");
				break;
		}
	}
</script>
<title>피벗/크로스테이블</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>
	<div id="title">피벗/크로스테이블 예제</div>
	<div id="desc">
		피벗 테이블은 대화형 테이블의 일종으로, 데이터의 나열 형태에 따라서 합계나 카운트 등의 계산을 하는 기능이다.<br>
		데이터가 있는 IBSheet의 값이 변경되더라도 피벗 테이블에 자동 반영되지 않으므로 원하는 시점에 이 메소드를 다시 호출 하여야 한다.<br>
		<br>
		<table width="80%" border="1" style="border-spacing: 1px; border-style: none; border-color: #CCCCCC;">
			<tr style="text-align:center">
				<td width="70">속성</td>
				<td width="50">타입</td>
				<td>설명</td>
			</tr>
			<tr>
				<td>Cols</td>
				<td>String</td>
				<td>열 레이블 필드에 설정할 '|'로 구분된 Column Index 또는 SaveName.</td>
			</tr>
			<tr>
				<td>DefaultView</td>
				<td>String</td>
				<td>값이 없는 셀에 보여질 문자열</td>
			</tr>
			<tr>
				<td>Rows</td>
				<td>String</td>
				<td>행 레이블 필드에 설정할 '|'로 구분된 Column Index 또는 SaveName.</td>
			</tr>
			<tr>
				<td>SortRow</td>
				<td>Boolean</td>
				<td>행 레이블 집계시 정렬후 집계할지 여부. 0으로 설정시 소트를 하지 않고 조회된 데이터 기준으로 행 레이블이 생성된다. 1로 설정시 조회된 데이터를 정렬후에 행 레이블을 생성한다.(기본값 : 1)</td>
			</tr>
			<tr>
				<td>Value</td>
				<td>String</td>
				<td>합계 또는 카운트할 '|'로 구분된 Column Index 또는 SaveName.</td>
			</tr>
			<tr>
				<td>ValueType</td>
				<td>String</td>
				<td>'|'로 구분된 합계행 타입. ('Sum' 합계, 'Count' 개수) Value 의 개수와 동일해야 한다.</td>
			</tr>
		</table>
		<br>
		예)<br>
		//5,6,7 열을 행 레이블 필드로 설정하고, 8,9,10 열을 열 레이블의 필드로 설정하여, 13 컬럼을 요약정보(합계)에 표시한다.<br>
		mySheet2.CreatePivotTable({Rows:'5|6|7', Cols:'8|9|10', Value:'13', ValueType:'Sum'}, mySheet);<br>
		<br>
		// 5,6,7 열을 행 레이블 필드로 설정하고, 2 열을 열 레이블의 필드로 설정하여, 13 컬럼을 요약정보(개수)에 표시한다.<br>
		mySheet2.CreatePivotTable({Rows:'5|6|7', Cols:'2', Value:'13', ValueType:'Count'}, mySheet);<br>
	</div>

	<div id="functionArea">
		<span>
			행(Rows) : <input type="text" size="4" id="rows" value="1|2|3">,
			열(Cols) : <input type="text" size="4" id="cols" value="5|6">,
			값(Value) : <input type="text" size="4" id="value" value="9|10">,
			타입(ValueType) :
			<select id="valueType">
				<option value="Sum" selected>합계</option>
				<option value="Count">갯수</option>
			</select>
			<input type="button" value="초기화" onclick="init()">
			<input type="button" value="피벗 적용" onclick="createPivotTable()">
			<input type="button" value="크로스테이블 적용" onclick="createCrossTable()">
		</span>
	</div>
	
	<div id="viewArea">
	</div>
	<div id="pivotArea">
	</div>
</div>
</body>
</html>